<template>
  <div class="container-content">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="实付金额	" prop="actualMoney">
                <el-input
                  v-model="formData.actualMoney"
                  placeholder="请输入实付金额	"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="应付金额" prop="copeMoney">
                <el-input
                  v-model="formData.copeMoney"
                  placeholder="请输入应付金额"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="应付票据" prop="payBillId">
                <el-input
                  v-model="formData.payBillId"
                  placeholder="请输入应付票据"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="采购部门" prop="procureDeptId">
                <el-input
                  v-model="formData.procureDeptId"
                  placeholder="请输入采购部门"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收款单位" prop="receiptDeptId">
                <el-input
                  v-model="formData.receiptDeptId"
                  placeholder="请输入收款单位"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="源单单号" prop="sourceNo">
                <el-input
                  v-model="formData.sourceNo"
                  placeholder="请输入源单单号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="往来单位" prop="transactionCompanyId">
                <el-input
                  v-model="formData.transactionCompanyId"
                  placeholder="请输入往来单位"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="业务时间" prop="businessTime">
                <el-date-picker
                  v-model="formData.businessTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :style="{ width: '100%' }"
                  placeholder="请选择业务时间"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单据类型" prop="docTypeCode">
                <el-select
                  v-model="formData.docTypeCode"
                  placeholder="请选择单据类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in docTypeIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="币别" prop="kingBaseCurrencyId">
                <el-select
                  v-model="formData.kingBaseCurrencyId"
                  placeholder="请选择币别"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in kingBaseCurrencyIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="付款组织" prop="payDeptId">
                <el-select
                  v-model="formData.payDeptId"
                  placeholder="请选择付款组织"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in payDeptIdOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收款单位类型" prop="receiptDeptType">
                <el-select
                  v-model="formData.receiptDeptType"
                  placeholder="请选择收款单位类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in receiptDeptTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="源单类型" prop="sourceType">
                <el-select
                  v-model="formData.sourceType"
                  placeholder="请选择源单类型"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in sourceTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
    <el-row v-if="!rowId">
      <el-button type="text" @click="add">新增行</el-button>
      <el-button type="text" @click="del">删除行</el-button>
      <el-table
        :data="kingFinanceReceiptPayDetailEntities"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="actualMoney" label="实收金额">
          <template slot-scope="scope">
            <el-input v-model="scope.row.actualMoney"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="bankNumber"
          show-overflow-tooltip
          label="我方银行账号"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.bankNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="cashDiscount" label="现金折扣">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cashDiscount"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="discountedMoney" label="折后金额">
          <template slot-scope="scope">
            <el-input v-model="scope.row.discountedMoney"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="handlingFees" label="手续费">
          <template slot-scope="scope">
            <el-input v-model="scope.row.handlingFees"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="kingSettlementTypeId" label="结算方式">
          <template slot-scope="scope">
            <el-input v-model="scope.row.kingSettlementTypeId"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiptPurpose"
          label="收款用途"
        ></el-table-column>
        <el-table-column prop="relationId" label="收付款单">
          <template slot-scope="scope">
            <el-input v-model="scope.row.relationId"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
  <script>
import { addInfo, getDetail } from "@/api/finance/pay";
import { getBankList } from "@/api/finance/bank.js";
export default {
  props: ["rowId"],
  data() {
    return {
      kingFinanceReceiptPayDetailEntities: [],
      rowList: [],
      formData: {
        actualMoney: "",
        businessTime: "",
        copeMoney: "",
        createBy: "",
        createTime: "",
        deptId: "",
        docTypeCode: "",
        id: "",

        kingBaseCurrencyId: "",
        params: {},
        payBillId: "",
        payDeptId: "",
        procureDeptId: "",
        receiptDeptId: "",
        receiptDeptType: "",
        remark: "",
        searchValue: "",
        sourceNo: "",
        sourceType: "",
        transactionCompanyId: "",
        type: 0,
        updateBy: "",
        updateTime: "",
      },
      //   rules: {
      //     billNo: [
      //       {
      //         required: true,
      //         message: "请输入票据号",
      //         trigger: "blur",
      //       },
      //     ],
      //     billType: [
      //       {
      //         required: true,
      //         message: "请选择票据类型",
      //         trigger: "change",
      //       },
      //     ],
      //     issuanceTime: [
      //       {
      //         required: true,
      //         message: "请选择签发日",
      //         trigger: "change",
      //       },
      //     ],
      //     faceRate: [
      //       {
      //         required: true,
      //         message: "请输入票面利率",
      //         trigger: "blur",
      //       },
      //     ],
      //     kingBaseCurrencyId: [
      //       {
      //         required: true,
      //         message: "请选择币别",
      //         trigger: "change",
      //       },
      //     ],
      //     payBankAddress: [
      //       {
      //         required: true,
      //         message: "请输入付款银行账户地址",
      //         trigger: "blur",
      //       },
      //     ],
      //     acceptanceBankId: [
      //       {
      //         required: true,
      //         message: "请输入承兑人",
      //         trigger: "blur",
      //       },
      //     ],
      //     payBankName: [
      //       {
      //         required: true,
      //         message: "请输入付款银行账户名称",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptBank: [
      //       {
      //         required: true,
      //         message: "请输入收款银行",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptBankAddress: [
      //       {
      //         required: true,
      //         message: "请输入收款银行地址",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptDeptId: [
      //       {
      //         required: true,
      //         message: "请输入收款单位Id",
      //         trigger: "blur",
      //       },
      //     ],
      //     billSerialNo: [
      //       {
      //         required: true,
      //         message: "请输入票据流水号",
      //         trigger: "blur",
      //       },
      //     ],
      //     dataStatus: [
      //       {
      //         required: true,
      //         message: "请选择数据状态",
      //         trigger: "change",
      //       },
      //     ],
      //     dueTime: [
      //       {
      //         required: true,
      //         message: "请选择到期日",
      //         trigger: "change",
      //       },
      //     ],
      //     faceAmount: [
      //       {
      //         required: true,
      //         message: "请输入票面金额	",
      //         trigger: "blur",
      //       },
      //     ],
      //     payBankAccount: [
      //       {
      //         required: true,
      //         message: "请输入付款银行账号",
      //         trigger: "blur",
      //       },
      //     ],
      //     payBankId: [
      //       {
      //         required: true,
      //         message: "请输入付款银行Id",
      //         trigger: "blur",
      //       },
      //     ],
      //     payDeptId: [
      //       {
      //         required: true,
      //         message: "请输入付款组织Id",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptBankAccount: [
      //       {
      //         required: true,
      //         message: "请输入收款银行账号",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptBankName: [
      //       {
      //         required: true,
      //         message: "请输入收款银行名称",
      //         trigger: "blur",
      //       },
      //     ],
      //     receiptDeptType: [
      //       {
      //         required: true,
      //         message: "请选择付款单位类型",
      //         trigger: "change",
      //       },
      //     ],
      //     settlementStatus: [
      //       {
      //         required: true,
      //         message: "请选择结算状态",
      //         trigger: "change",
      //       },
      //     ],
      //   },
      docTypeIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      kingBaseCurrencyIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      payDeptIdOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      receiptDeptTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      sourceTypeOptions: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
    };
  },
  methods: {
    submit(cb) {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        if (this.rowId) {
          editInfo(this.formData).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              cb();
            }
          });
        } else {
          const params = {
            kingFinancePayEntity: this.formData,
            kingFinanceReceiptPayDetailEntities:
              this.kingFinanceReceiptPayDetailEntities,
          };
          addInfo(params).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "新增成功！",
                type: "success",
              });
              cb();
            }
          });
        }
      });
    },
    add() {
      let params = {
        actualMoney: "",
        bankNumber: "",
        cashDiscount: "",
        createBy: "",
        createTime: "",
        deptId: "",
        discountedMoney: "",
        handlingFees: "",
        id: "",

        kingSettlementTypeId: "",
        params: {},
        receiptPurpose: "",
        receivableMoney: "",
        relationId: "",
        remark: "",
        searchValue: "",
        type: 0,
        updateBy: "",
        updateTime: "",
      };
      this.kingFinanceReceiptPayDetailEntities.push(params);
    },
    del() {
      this.kingFinanceReceiptPayDetailEntities =
        this.kingFinanceReceiptPayDetailEntities.filter((e) => {
          return !this.rowList.some((item) => item.index === e.index);
        });
    },
    handleSelectionChange(val) {
      this.rowList = val;
    },
  },
  mounted() {
    this.getDicts("king_currency_type").then((res) => {
      this.kingBaseCurrencyIdOptions = res.data.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
    });
    getBankList().then((res) => {});
    if (this.rowId) {
      console.log(this.rowId);
      getDetail(this.rowId).then((res) => {
        if (res.code === 200) {
          this.formData = res.data.kingFinancePayBillEntity;
        }
      });
    }
  },
};
</script>
  <style lang="scss" scoped>
.divider {
  margin: 0;
}
</style>
  